<template>
  <div>
    <h1>访问父级组件实例 $parent</h1>
    <div>$parent.title: {{ $parent.title }}</div>
    <div><button @click="changeTitle">changeTitle</button></div>
    <h1>访问子组件实例</h1>
    <Child ref="child" />
    <HelloWorld />
    <div>
      <button @click="getChildTitle">获取子组件标题</button>
    </div>
  </div>
</template>

<script>
import Child from "@/components/Child";
import HelloWorld from "@/components/HelloWorld";

export default {
  components: {
    HelloWorld,
    Child,
  },
  methods: {
    changeTitle() {
      this.$parent.title = "Hello Parent";
    },
    getChildTitle() {
      console.log(this.$children[0].title);
      console.log(this.$refs.child.title);
    },
  },
};
</script>
<style>
</style>